<template>
  <div>
    <Header :title="{ zh: '成型目视管理看板', en: 'Assembly Visual Board', index: 0 }" />

    <div class="EchartsContainer">
      <div class="row">
        <div class="item">
          <div class="title">月生产状况</div>
          <div class="echarts" id="main"></div>
        </div>
        <div class="item">
          <div class="title">月生产达成率</div>
          <div class="echarts" id="main2"></div>
        </div>
        <div class="item" style="margin-left: 10px">
          <div class="title">成一线人均产能<span style="color: red">(双/天)</span></div>
          <div class="echarts" id="main3"></div>
        </div>
      </div>

      <div class="row" style="margin-top: 10px">
        <div class="item">
          <div class="title">成二线人均产能<span style="color: red">(双/天)</span></div>
          <div class="echarts" id="main4"></div>
        </div>
        <div class="item">
          <div class="title">成三线人均产能<span style="color: red">(双/天)</span></div>
          <div class="echarts" id="main5"></div>
        </div>
        <div class="item">
          <div class="title">成四线人均产能<span style="color: red">(双/天)</span></div>
          <div class="echarts" id="main6"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import Header from '../components/Header.vue'
import * as echarts from 'echarts'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const tableData1 = ref({
  ordQty: [], // 目标产量
  inQty: [], // 实际产量
  deptName: [] //部门名称
}) as any
// 人均产能接口返回数据
const aoppData = ref({
  cx: {
    list: [],
    xData: []
  },
  cx2: {
    list: [],
    xData: []
  },
  cx3: {
    list: [],
    xData: []
  },
  cx4: {
    list: [],
    xData: []
  }
}) as any
const DeptNos = ref([]) as any
const DeptName = ref([]) as any
const getDeptTypes = async () => {
//   try {
//     let tableDataList = (await request.put<any, any>(
//       `/last/show/dept/status`
//     )) as any
//     console.log(tableDataList)
//     tableDataList.forEach((item: any) => {
//       DeptNos.value.push(item.deptNo)
//       DeptName.value.push(item.deptName)
//     })
//   } catch (error: any) {
//     ElMessage.error(error)
//   }
 }
const getData = async () => {
  // 获取月生产状况


  // 获取人均产能
  // const newList = DeptNos.value.map(async (item: any) => {
  //   try {
  //     let tableDataList = (await request.post<any, any>(
  //       `/procReq/aopp/query?deptNo=${item}`
  //     )) as any
  //     for (const key in tableDataList) {
  //       aoppData.value[item].list.push(tableDataList[key])
  //       aoppData.value[item].xData.push(key)
  //     }
  //     return Promise.resolve()
  //   } catch (error: any) {
  //     ElMessage.error(error)
  //     return Promise.reject()
  //   }
  // })
  // await Promise.all(newList)
}

onMounted(async () => {
  await getDeptTypes()
  await getData()
  getEchartsDom()
})

const getEchartsDom = () => {
  let chartDom = document.getElementById('main')
  let myChart = echarts.init(chartDom)
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['目标产量', '实际产量'],
      top: 'bottom'
    },
    grid: {
      left: 60,
      right: 0,
      top: 30,
      bottom: 45
    },
    xAxis: [
      {
        type: 'category',
        data: tableData1.value.deptName,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 35000,
        interval: 20000,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '目标产量',
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        itemStyle: {
          // 设置柱状图颜色
          color: '#88ADFB'
        },
        data: [46000, 46000, 46000, 46000]
        // data: tableData1.value.ordQty
      },
      {
        name: '实际产量',
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        },
        itemStyle: {
          // 设置柱状图颜色
          color: '#72DDB3'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        data: [5913, 3434, 6131, 5128]
        // data: tableData1.value.inQty
      }
    ]
  }
  option && myChart.setOption(option)

  // 第二张图
  let chartDom2 = document.getElementById('main2')
  let myChart2 = echarts.init(chartDom2)
  // There should not be negative values in rawData
  const rawData = [tableData1.value.inQty, tableData1.value.ordQty]
  const totalData = [] as any
  for (let i = 0; i < rawData[0].length; ++i) {
    let sum = 0
    for (let j = 0; j < rawData.length; ++j) {
      sum += rawData[j][i]
    }
    totalData.push(sum)
  }
  const series = ['实际产量', '目标产量'].map((name, sid) => {
    return {
      name,
      type: 'bar',
      stack: 'total',
      barWidth: '40%',

      data: [0.13, 0.07, 0.13, 0.11]
      // data: rawData[sid].map((d: any, did: any) => (totalData[did] <= 0 ? 0 : d / totalData[did]))
    }
  })
  let option2 = {
    color: ['#FAC858', '#93BEFF'],

    legend: {
      data: ['目标产量', '实际产量'],
      top: 'bottom',
      selectedMode: false
    },
    grid: {
      left: 40,
      right: 20,
      top: 30,
      bottom: 45
    },
    yAxis: {
      type: 'value'
    },
    xAxis: {
      type: 'category',
      data: DeptName.value
    },
    series: [
      {
        name: '实际产量',
        type: 'bar',
        stack: 'total',
        barWidth: '40%',
        data: [0.13, 0.07, 0.13, 0.11]
      }, {
        name: '目标产量',
        type: 'bar',
        stack: 'total',
        barWidth: '40%',
        data: [0.87, 0.93, 0.87, 0.89]
      },
    ]
  }
  option2 && myChart2.setOption(option2)

  // 第三张图
  let chartDom3 = document.getElementById('main3')
  let myChart3 = echarts.init(chartDom3)
  let option3 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['成一线'],
      top: 'bottom'
    },
    grid: {
      left: 50,
      right: 20,
      top: 30,
      bottom: 45
    },
    xAxis: [
      {
        type: 'category',
        data: ['9/4', '9/3', '9/2'],
        // data: aoppData.value.cx.xData,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 100,
        // interval: 20,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '成一线',
        type: 'bar',
        barWidth: '40%',
        label: {
          show: true,
          position: 'top'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：从上到下
            [
              { offset: 0, color: '#88ADFB' },
              { offset: 1, color: '#E3ECFF' }
            ]
          )
        },
        data: [30, 50, 40]
        // data: aoppData.value.cx.list
      }
    ]
  }
  option3 && myChart3.setOption(option3)

  // 第四张图
  let chartDom4 = document.getElementById('main4')
  let myChart4 = echarts.init(chartDom4)
  let option4 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['成二线'],
      top: 'bottom'
    },
    grid: {
      left: 40,
      right: 0,
      top: 30,
      bottom: 45
    },
    xAxis: [
      {
        type: 'category',
        data: ['9/4', '9/3', '9/2'],
        // data: aoppData.value.cx2.xData,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 100,
        // interval: 20,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '成二线',
        type: 'bar',
        barWidth: '40%',
        label: {
          show: true,
          position: 'top'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：从上到下
            [
              { offset: 0, color: '#88ADFB' },
              { offset: 1, color: '#E3ECFF' }
            ]
          )
        },
        data: [26, 35, 30]
        // data: aoppData.value.cx2.list
      }
    ]
  }
  option4 && myChart4.setOption(option4)

  // 第五张图
  let chartDom5 = document.getElementById('main5')
  let myChart5 = echarts.init(chartDom5)
  let option5 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['成三线'],
      top: 'bottom'
    },
    grid: {
      left: 50,
      right: 0,
      top: 30,
      bottom: 45
    },
    xAxis: [
      {
        type: 'category',
        data: ['9/4', '9/3', '9/2'],
        // data: aoppData.value.cx2.xData,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 100,
        // interval: 20,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '成三线',
        type: 'bar',
        barWidth: '40%',
        label: {
          show: true,
          position: 'top'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：从上到下
            [
              { offset: 0, color: '#88ADFB' },
              { offset: 1, color: '#E3ECFF' }
            ]
          )
        },
        data: [30, 50, 40]
        // data: aoppData.value.cx2.list
      }
    ]
  }
  option5 && myChart5.setOption(option5)

  // 第六张图
  let chartDom6 = document.getElementById('main6')
  let myChart6 = echarts.init(chartDom6)
  let option6 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['成四线'],
      top: 'bottom'
    },
    grid: {
      left: 50,
      right: 20,
      top: 30,
      bottom: 45
    },
    xAxis: [
      {
        type: 'category',
        data: ['9/4', '9/3', '9/2'],
        // data: aoppData.value.cx2.xData,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 100,
        // interval: 20,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '成四线',
        type: 'bar',
        barWidth: '40%',
        label: {
          show: true,
          position: 'top'
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 渐变方向：从上到下
            [
              { offset: 0, color: '#88ADFB' },
              { offset: 1, color: '#E3ECFF' }
            ]
          )
        },
        data: [30, 50, 40]
        // data: aoppData.value.cx2.list
      }
    ]
  }
  option6 && myChart6.setOption(option6)
}
onMounted(() => {
  function One() {
    if (location.href.indexOf('#reloaded') == -1) {
      location.href = location.href + '#reloaded'
      location.reload()
    }
  }
  One()
})
</script>

<style scoped lang="less">
.EchartsContainer {
  border-radius: 4px;
  margin-top: 10px;
  height: calc(100vh - 7vh - 40px);
  width: 100%;
}

.row {
  display: flex;
  height: 50%;
  width: 100%;

  .item {
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 10px;

    // align-items: center;
    .title {
      font-weight: 900;
      font-size: 1rem;
      margin-top: 10px;
      text-align: center;
      color: black;
    }

    .echarts {
      flex: 1;
    }
  }
}
</style>
